<template>
    <div class="login-page">
        <!-- 标题 -->
        <div class="title">登录页面</div>

        <!-- 输入框 -->
        <van-cell-group>
            <van-field v-model="phone" label="手机号" placeholder="请输入手机号" type="tel" maxlength="11" clearable />
        </van-cell-group>

        <!-- 登录按钮 -->
        <div class="btn-wrapper">
            <van-button class="login-btn" type="primary" block @click="onLogin">
                登录
            </van-button>
        </div>

        <!-- 路由链接导航 -->
        <div class="link-group">
            <van-cell-group>
                <van-cell class="link-item" is-link title="上传" @click="navigateTo('/alioss')" />
                <van-cell class="link-item" is-link title="搜索" @click="navigateTo('/search')" />
                <van-cell class="link-item" is-link title="测试WebSocket" @click="navigateTo('/websocket')" />
                <van-cell class="link-item" is-link title="服务器监控" @click="navigateTo('/service')" />
                <van-cell class="link-item" is-link title="测试食物页面" @click="navigateTo('/service1')" />
                <van-cell class="link-item" is-link title="钉钉登录" @click="navigateTo('/test')" />
                <van-cell class="link-item" is-link title="在线咨询" @click="navigateTo('/chat')" />
                
            </van-cell-group>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import http from "../http";
import { showToast } from "vant";
import { useRouter } from "vue-router";

const router = useRouter();
const phone = ref("");

const onLogin = () => {
    if (!phone.value) {
        showToast({ type: "fail", message: "请输入手机号" });
        return;
    }
    http.post("app/login/", { phone: phone.value }).then((res) => {
        if (res.data.code == 400) {
            showToast({ type: "fail", message: "账号或密码错误" });
        } else if (res.data.code == 200) {
            let token = res.data.token;
            let refresh = res.data.refresh;
            let menu = res.data.menu;
            let urldata = res.data.url_list;
            let userId = res.data.user_id;

            console.log(menu);
            showToast({ type: "success", message: "登录成功" });
            localStorage.setItem("token", token);
            localStorage.setItem("refresh", refresh);
            localStorage.setItem("menu", JSON.stringify(menu));
            localStorage.setItem("urldata", JSON.stringify(urldata));
            localStorage.setItem("userId", JSON.stringify(userId));
            router.push({ path: "/index" });
        }
    });
};

const navigateTo = (path) => {
    router.push({ path });
};
</script>

<style scoped>
.login-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 100px;
    background-color: #f7f8fa;
    padding: 20px;
    transform: translate(-50%);
    left: 50%;
    position: relative;
    width: 350px;
    height: 600px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.btn-wrapper {
    width: 100%;
    margin-top: 20px;
}

.login-btn {
    font-size: 16px;
    font-weight: bold;
    border-radius: 25px;
    background: linear-gradient(45deg, #4caf50, #66bb6a);
    color: #fff;
}

.link-group {
    width: 100%;
    margin-top: 30px;
}

.link-item {
    font-size: 16px;
    color: #333;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.link-item:hover {
    background: #f0f0f0;
}
</style>
